<template>
  <div>
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>留言</span>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <div class="litop">
          <img v-if="item.avatar" :src="item.avatar" alt />
          <img v-else src="../../assets/tuto.png" alt />
          <div>
            <p class="msg">留言者昵称：{{item.nick_name}}</p>
            <p class="msg">留言者电话：{{item.mobile}}</p>
            <p class="time">{{item.ctime}}</p>
          </div>
        </div>
        <p class="centent">留言内容：{{item.content}}</p>
      </li>
    </ul>
    <p class="pull">{{newxin}}</p>
  </div>
</template>

<script>
export default {
  created() {
      this.request();
  },
  data() {
    return {
      list: [],
      page:1,
      newxin:""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods:{
      request(s){
          this.$axios.post("/index/Otcexchange/getmsg",{
              limit:10,
              page:this.page
          })
          .then(res=>{
              console.log(res.data)
              // if(res.data.code==0&&res.data.info.length>0){
              //     !s&&res.data.info.length<9?(this.list=res.data.info,this.newxin="已加载完所有数据")
              //     :(this.list=res.data.info,this.newxin="下拉更新");
              //     s&&res.data.info.length<9?(this.list.concat(res.data.info),this.newxin="已加载完所有数据")
              //     :s?(this.list.concat(res.data.info),this.newxin="下拉更新"):'';
              // }else{
              //   !s?this.newxin="":"";
              // }

              if(res.data.code==0&&res.data.info.length>0){
                var he=()=>{
                    for(var i=0; i<res.data.info.length; i++){
                      this.list.push(res.data.info[i])
                    }
                }
                !s&&res.data.info.length<9?(this.list=res.data.info,this.newxin="已加载完所有数据"):
                !s&&res.data.info.length>9?(this.list=res.data.info,this.newxin="下拉更新"):"";
                s&&res.data.info.length<9?(he(),this.newxin="已加载完所有数据")
                :s?(he(),this.newxin="下拉更新"):'';
            }else{
              !s?(this.newxin=""):this.newxin="已加载完所有数据";
            }
          })
      },
         //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        this.list.length > 9 ? (this.page++,this.request(this.page)) : "";
        return false;
      }
    },
  }
};
</script>

<style lang="less" scoped>
ul {
  background: #f4f4f4;
  width: 100%;
  padding-bottom: 0.01rem;
}
li {
  margin-bottom: 0.1rem;
  padding: 0.5rem 0.4rem 0.4rem;
  background: #fff;
}
.litop {
  display: flex;
  margin-bottom: 0.3rem;
  img {
    width: 1.49rem;
    height: 1.49rem;
    margin-right: 0.35rem;
    border-radius: 50%;
  }
  .msg {
    font-size: 0.4rem;
    font-weight: bold;
    text-align: left;
  }
  .time {
    font-size: 0.3rem;
    color: #999;
    text-align: left;
  }
}
.centent {
  min-height: 3.438rem;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 0.2rem;
  text-align: left;
}
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
  text-align: center;
}
</style>
